<script setup lang="ts">
//导入

//ref、reactive、自定义变量

//hooks

//方法
import DirectionAwareHover from "~/components/ui/DirectionAwareHover.vue";
import {VsLoadingFn} from "vuesax-alpha";
import type {ProjectItem, ProjectListResponse} from "~/types";
import { CardContainer, CardBody, CardItem } from "@/components/ui/card-3d";
import {useListAnimate} from "~/server/utils";

const container = ref<HTMLElement>()
const projectList = ref<ProjectItem[]>([])
const cardItem = ref<InstanceType<typeof CardContainer>[]>([])
function getProjectList() {
  const loadingFn = VsLoadingFn({
    target: container,
    type: 'circles',
    // text: '玩命加载中',
    scale: '1.2',
    // background: 'rgba(0,0,0,0.1)'
  })
  $fetch('/api/projects/getAll').then(res => {
    const resp = res as ProjectListResponse;
    projectList.value = (resp.data || []).filter(item => item.enable)
    nextTick(()=> {
      if(cardItem.value.length>0){
        const elements = cardItem.value.map(v=>v.$el);
        const {startTweenAnimate} = useListAnimate(useNuxtApp().$gsap,elements)
        startTweenAnimate()
      }
    })
  }).finally(()=> {
    loadingFn.close()
  })
}

function goTarget(url:string){
  window.open(url,'_blank')
}

onMounted(()=> {
//   获取项目列表
  getProjectList()
})
</script>

<template>
  <div class="container mx-auto p-8" ref="container">

    <div class="h-full w-11/12 m-auto flex flex-wrap gap-6">
      <ClientOnly>
        <CardContainer           
        v-for="item in projectList"
        ref="cardItem"
        container-class="2xl:w-[calc(33.3%-1.5em)] lg:w-[calc(50%-3em)] w-full h-1/2 h-100"
        class="h-full w-full" 
          :key="item.id">
          <CardBody
            class="w-full cursor-pointer flex flex-nowrap flex-col pl-16 pt-14 pb-12 pr-8  group/card relative h-full shadow hover:shadow-2xl rounded-xl border border-black/[0.1] bg-gray-50 dark:border-white/[0.2] dark:bg-black dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1]"
          >
            <CardItem
              :translate-z="50"
              class="text-xl font-bold text-neutral-600 dark:text-white"
            >
              {{ item.name }}
            </CardItem>
            <CardItem
              as="p"
              translate-z="60"
              class="mt-2 min-h-8 max-w-sm text-sm text-neutral-500 dark:text-neutral-300"
            >
              {{item.comment}}
            </CardItem>
            <CardItem
              :translate-z="100"
              class="mt-4 w-full h-44"
            >
              <NuxtImg
                :src="item.previewUrl"
                class="h-full w-full rounded-xl object-cover group-hover/card:shadow-xl"
                alt="thumbnail"
                :placeholder="[50, 25, 75, 5]"
                loading="lazy"
              />
            </CardItem>
            <div class="mt-20 flex items-center justify-between">
              <CardItem
                :translate-z="20"
                as="a"
                :href="item.url"
                target="__blank"
                class="rounded-xl px-4 py-2 text-xs font-normal dark:text-white"
              >
                进入 →
              </CardItem>
              <CardItem
                :translate-z="20"
                as="button"
                class="rounded-xl bg-black px-4 py-2 text-xs font-bold text-white dark:bg-white dark:text-black"
                @click="goTarget(item.url)"
              >
                访问
              </CardItem>
            </div>
          </CardBody>
    </CardContainer>
      </ClientOnly>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>